<template>
  <div>
    <el-row style="margin-top:20px" class="left-margin">
      <el-col :span="24">
        <el-button v-permission="['system/menu/addSubMenu']" size="small" icon="el-icon-plus" type="primary" @click="addSubMenu">添加子菜单</el-button>
        <el-button v-permission="['system/menu/addFirstMenu']" size="small" icon="el-icon-plus" type="primary" @click="addMenu">添加一级菜单</el-button>
      </el-col>
    </el-row>

    <el-row style="margin-top:30px">
      <el-col :span="6" class="left-margin">
        <div>
          <el-input
            style="margin-bottom:20px;width:300px"
            placeholder="输入关键字进行过滤"
            v-model="filterText"
          ></el-input>

          <el-tree
            :data="data"
            show-checkbox
            default-expand-all
            :expand-on-click-node="false"
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            @node-click="menuclick"
            :filter-node-method="filterNode"
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="grid-content bg-purple">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="类型">
              <el-radio-group v-model="form.type">
                <el-radio :label="0">页面菜单</el-radio>
                <el-radio :label="1">操作按钮</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="名称">
              <el-input v-model="form.label"></el-input>
            </el-form-item>
            <el-form-item label="路径" v-if="form.type==0">
              <el-input v-model="form.path"></el-input>
            </el-form-item>
            <!-- <el-form-item label="英文名">
              <el-input v-model="form.englishName"></el-input>
            </el-form-item>-->
            <el-form-item label="图标" v-if="form.type==0">
              <el-input v-model="form.icon"></el-input>
              <span class="tip-bg">
                图标请参考
                <a target="_blank" href="http://ionicons.com/">
                  <i class="el-icon-search" style="margin-right:5px"></i>icons
                </a>
              </span>
            </el-form-item>

            <el-form-item label="前端组件" v-if="form.type==0">
              <el-input v-model="form.component" style="width:190px"></el-input>
            </el-form-item>
            <el-form-item label="按钮权限" v-if="form.type==1">
              <el-input v-model="form.buttonRolePrefix" style="width:155px" disabled></el-input>
              <el-input v-model="form.buttonRole" style="width:190px"></el-input>
            </el-form-item>

            <el-form-item label="菜单排序值" v-if="form.type==0">
              <el-input v-model="form.sortOrder" type="number" style="width:190px"></el-input>
              <span style="margin-left:5px" class="tip-bg">值越小越靠前，支持小数</span>
            </el-form-item>

            <el-form-item label="是否启用">
              <el-switch v-model="form.enable"></el-switch>
            </el-form-item>

            <el-form-item label="菜单描述" v-if="form.type==0">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                @click="editMenuSubmit"
                v-loading.fullscreen.lock="fullscreenLoading"
              >修改</el-button>
              <el-button type="warning" size="small" @click="deleteMenuSubmit">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      top="6vh"
      :title="addTitle"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
      <el-form ref="menuAddForm" :model="menuAddForm" label-width="100px">
        <el-form-item label="父菜单" v-if="!addFirstLevelMenu">
          <span style="color:red">{{form.label}}</span>
        </el-form-item>

        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="menuAddForm.type" @change="changeType">
            <el-radio :label="0">页面菜单</el-radio>
            <el-radio :label="1" :disabled="disabledType">操作按钮</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="名称" prop="label">
          <el-input v-model="menuAddForm.label" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="路径" v-if="menuAddForm.type==0" prop="path">
          <el-input v-model="menuAddForm.path" style="width:350px"></el-input>
        </el-form-item>
        <!-- <el-form-item label="英文名">
          <el-input v-model="menuAddForm.englishName" style="width:350px"></el-input>
        </el-form-item>-->
        <el-form-item label="图标" v-if="menuAddForm.type==0" prop="icon">
          <el-input v-model="menuAddForm.icon" style="width:350px"></el-input>
          <span class="tip-bg">
            图标请参考
            <a target="_blank" href="http://ionicons.com/">
              <i class="el-icon-search" style="margin-right:5px"></i>icons
            </a>
          </span>
        </el-form-item>

        <!-- <div v-if="menuAddForm.type==0"> -->
        <el-form-item
          label="前端组件"
          prop="component"
          v-if="menuAddForm.type==0 && !addFirstLevelMenu"
        >
          <el-input v-model="menuAddForm.component" style="width:190px"></el-input>
        </el-form-item>
        <el-form-item label="前端组件" prop="component" v-if="addFirstLevelMenu">
          <el-select v-model="menuAddForm.component" placeholder="请选择">
            <el-option label="Layout" value="Layout"></el-option>
          </el-select>
        </el-form-item>
        <!-- </div> -->
        <el-form-item label="按钮权限" prop="buttonRole" v-if="menuAddForm.type==1">
          <el-input v-model="form.component" style="width:155px" disabled></el-input>
          <el-input v-model="menuAddForm.buttonRole" style="width:190px"></el-input>
        </el-form-item>

        <el-form-item label="菜单排序值" prop="sortOrder" v-if="menuAddForm.type==0">
          <el-input v-model="menuAddForm.sortOrder" type="number" style="width:190px"></el-input>
          <span style="margin-left:5px" class="tip-bg">值越小越靠前，支持小数</span>
        </el-form-item>

        <el-form-item label="是否启用" prop="enable">
          <el-switch v-model="menuAddForm.enable" @change="changeEnable"></el-switch>
        </el-form-item>

        <el-form-item label="菜单描述" prop="desc" v-if="menuAddForm.type==0">
          <el-input type="textarea" v-model="menuAddForm.desc" style="width:350px"></el-input>
        </el-form-item>
        <!-- <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
        </el-form-item>-->
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="addMenuSubmit">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { menulist, addMenu, editMenu, deleteMenu } from "@/api/system/menu-api";
import permission from "@/directive/permission/index.js"; // 权限判断指令

export default {
  directives: { permission },
  /* eslint-disable */
  name: "menu",

  data() {
    return {
      addFirstLevelMenu: false,
      fullscreenLoading: false,
      addTitle: "添加菜单",
      filterText: "",
      disabledType: false,
      dialogVisible: false,
      form: {
        id: 0,
        type: "",
        name: "",
        path: "",
        englishName: "",
        icon: "",
        enable: "",
        desc: ""
      },
      menuAddForm: {
        type: "",
        name: "",
        path: "",
        englishName: "",
        icon: "",
        enable: true,
        desc: "",
        parentId: "",
        component: "",
        buttonRole: "",
        buttonRolePrefix: ""
      },
      data: [],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },

  methods: {
    init() {
      this.handleSearch();
      console.log('handleSearch menu ')
        console.log(process.env.VUE_APP_BASE_API )
    },
    onSubmit() {},

    handleSearch() {
      menulist({ all: 1 }).then(response => {
        this.data = response.data;
      });
    },

    menuclick(data, node, cur) {
      this.form = data;
    },

    //新增菜单按钮
    addMenu() {
      this.menuAddForm.type = 0;
      this.disabledType = true;
      this.addFirstLevelMenu = true;
      this.addTitle = "添加一级菜单";
      this.dialogVisible = true;
    },
    //添加子菜单 需要先选择父菜单得到 父菜单的Id
    addSubMenu() {
      this.addTitle = "添加菜单";
      this.addFirstLevelMenu = false;

      if (this.form != null && this.form.id != 0) {
        if (this.form.parentId == null) {
          this.disabledType = true;
        } else {
          this.disabledType = false;
        }
        this.dialogVisible = true;
      } else {
        this.$message({ message: "请先选择父菜单", type: "warning" });
      }
    },
    deleteMenuSubmit() {
      this.$confirm("确定要删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteMenu(this.form.id).then(response => {
          this.$message({ message: "删除成功", type: "success" });
          this.init();
        });
      });
    },
    //修改 菜单
    editMenuSubmit() {
      this.fullscreenLoading = true;
      editMenu(this.form).then(response => {
        this.$message({ message: "修改成功", type: "success" });
        this.init();
        this.fullscreenLoading = false;
      });
    },
    //新增 菜单
    addMenuSubmit() {
      console.log(this.menuAddForm);
      this.fullscreenLoading = true;
      if (!this.addFirstLevelMenu) {
        this.menuAddForm.parentId = this.form.id;
        this.menuAddForm.buttonRolePrefix = this.form.component;
      }
      addMenu(this.menuAddForm).then(response => {
        this.$message({ message: "新增成功", type: "success" });
        this.dialogVisible = false;
        this.init();
        this.fullscreenLoading = false;
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    changeEnable(value) {},
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //选中 菜单类型还是按钮类型
    changeType(value) {
      //表示 选中了 按钮类型，那么现实 给按钮提供权限的input
      if (value == 1) {
        this.addTitle = "添加按钮";
      }
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  created() {}
};
</script>

<style scoped>
/* eslint-disable */
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/* customer */
.tip-bg {
  color: #5390f0;
}

.left-margin {
  margin-left: 20px;
}
d .menu-addform-input-width {
  width: 350px;
}
/* eslint-disable */
</style>